<template>
  <div class="recommend"
       v-if="showRecommend">
    <div class="title"
         border-top-bottom-1px>为你推荐</div>
    <ul class="recommend-list">
      <li v-for="item of list"
          :key="item.goods_id">
        <common-card :info="item"></common-card>
      </li>
    </ul>
  </div>
</template>
<script>
import CommonCard from 'common/card/card'
export default {
  name: 'HomeRecommend',
  components: {
    CommonCard
  },
  props: {
    list: {
      type: Array
    }
  },
  computed: {
    showRecommend () {
      return this.list.length
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.title
  width 100%
  height 62px
  line-height 62px
  background-color $recommend_title
  text-align center
  font-size $shop_name
  font-weight 400
  color $common_fz_color

.recommend-list
  background-color $recommend_bgc
  width 100%
  display flex
  justify-content space-between
  flex-wrap wrap

  li
    width 372px
    height 516px
    background $common_bgc
    border-radius 4px
    padding()
    padding-top 12px
    margin-bottom 7px
</style>
